/**
 * @author:linjiye
 * @date: 2024/12/25
 * @desc:
 **/

import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React, {useEffect, useState} from 'react'
import PageFormBtn from "@/components/PageFormBtn";
import {FcView} from "@/components/FcView";
import {useRouter} from "expo-router";
import FormTitle from "@/components/FormTitle";
import FcButton from "@/components/FcButton";
import {Flex} from "@ant-design/react-native";
import PageScrollView from "@/components/PageScrollView";
import FcTextInput from "@/components/FcTextInput";
import {useGetSummaryFromUrlMutation} from "@/store/api/morePlatforms/morePlatformsApi";
import {useDispatch, useSelector} from "react-redux";
import {set_params} from "@/store/reducer/morePlatforms/morePlatformsSlice";

type Props = {}

const index = (props: Props) => {
    const router = useRouter();
    const [pageScrollBodyH, setPageScrollBodyH] = useState(0)
    const [platformsList, setPlatformsList] = useState([
        {
            name: '公众号',
            id: 1,
        }, {
            name: '今日头条',
            id: 2
        }, {
            name: '知乎',
            id: 3
        }
    ])
    const [platformsItem, setPlatformsItem] = useState(platformsList[0])
    const [url, setUrl] = useState('')
    const [params, setParams] = useState({})

    const dispatch = useDispatch()
    let p = useSelector(state => state.morePlatforms.params)
    useEffect(() => {
        if (p) setParams(p)
    }, [p])

    function getScrollBodyInfo({height}) {
        setPageScrollBodyH(height)
    }

    const handlePageFormBtnClick = (val) => {
        dispatch(set_params({
            ...params,
            url: url,
            platformsItem: platformsItem,
            text: ''
        }))
        router.navigate('/morePlatforms/result?url='+url)
    }

    function selectPlatforms(item) {
        setPlatformsItem(item)
    }


    return (
        <PageScrollView
            getPageScrollBodyInfo={getScrollBodyInfo}
            isHaveHeader
            isTransparentTab
            pageBottom={
                <PageFormBtn btnName='获取内容并改写' disable={url ? false : true}
                             onPageFormBtnClick={handlePageFormBtnClick}/>
            }
        >
            <FcView style={[styles.container, {height: pageScrollBodyH - 8}]}>
                <FormTitle style={{paddingHorizontal: 16}} isLeftIcon title='选择平台'/>
                <Flex wrap='wrap' style={styles.list}>
                    {platformsList?.map((item, index) =>
                        <View style={styles.item_box} key={index}>
                            <FcButton
                                onPress={() => selectPlatforms(item)}
                                type={platformsItem.id === item.id ? 'txtBK' : 'default'}
                                style={[styles.item]}
                                itemStyle={{width: '100%', height: '100%'}}
                                textName={item.name} borderWidth={1}></FcButton>
                        </View>
                    )}
                </Flex>
                <FormTitle style={{paddingHorizontal: 16}} isLeftIcon title='输出文章链接地址'/>
                <FcTextInput multiline text={url} placeholder={'输入文章链接地址'} onChangeText={setUrl}
                             style={{marginHorizontal: 16}}
                             height={120}/>
            </FcView>
        </PageScrollView>
    )
}

export default index

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        borderRadius: 8,
        paddingBottom: 16,
    },
    list: {
        paddingHorizontal: 8,
        display: "flex",
        flexWrap: "wrap",
        flexDirection: "row",
    },
    item_box: {
        width: '33.33%',
        height: 40,
        marginBottom: 4
    },
    item: {
        height: 40,
        lineHeight: 40,
        borderRadius: 8,
        marginHorizontal: 4,
        flex: 1,
    },
})